<template>
  <div id="songList">
    <div class="title flex_space_btween">
      <p>音乐标题</p>
      <p>飙升率</p>
      <p>歌手</p>
      <p>专辑</p>
      <p>时长</p>
    </div>
    <div class="hd-dec flex_start">
      <div class="icon flex_center">
        <img src="./images/listicon.png" alt="" />
      </div>
      <p>含2首VIP专享歌曲</p>
      <p class="frist">首开VIP仅5元</p>
    </div>
    <ul class="list">
      <li
        v-for="(item, index) in songList"
        :key="index"
        class="flex_space_btween"
        :class="{ active: index % 2 === 0 }"
        @click="play(item)"
      >
        <div class="music-title flex_start">
          <!-- vue html的特色符号 如大于小于等 要使用替换符 -->
          <span>{{index = index+1 &lt; 10 ? '0' +(index+1):index+1}}</span>
          <div class="icon"><img src="./images/collection2 .png" alt="" /></div>
          <div class="icon after">
            <img src="./images/download2.png" alt="" />
          </div>
          <span class="ms-name">{{ item.name }}</span>
          <!-- <div class="mv flex_center" :class="{vip:item.copyright === 1}">VIP</div> -->
          <div class="mv flex_center sq">SQ</div>
          <div class="mv flex_center" :class="{ active: item.mv }" @click="skipMv({ id: item.mv })">MV</div>
        </div>
        <p class="up">%</p>
        <p>{{ item.ar[0].name }}</p>
        <p>{{ item.al.name }}</p>
        <p>
          {{ Math.floor(item.dt / 1000 / 60) }}:{{
            Math.floor((item.dt / 1000) % 60) &lt; 10 ? '0' +(Math.floor((item.dt / 1000) % 60)):Math.floor((item.dt / 1000) % 60)
          }}
        </p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "songList",
  data() {
    return {
      songList: [],
    };
  },
  //监听路由，改变时刷新页面
  watch: {
    $route: function (newUrl, oldUrl) {
      if (newUrl != oldUrl) {
        location.reload();
      }
    },
  },
  created() {
    //根据传过来的id请求到歌单列表
    this.axios({
      method: "get",
      withCredentials: true,
      url:
        "https://music.hzbiz.net/playlist/detail??timetamp=" +
        new Date().getTime(),
      params: {
        id: this.$route.query.id,
      },
    }).then((res) => {
      console.log("先", res.data);
      this.songList = res.data.playlist.tracks;
    });
  },
  methods: {
     //跳转mv
    skipMv(item) {
      this.$router.push({
        path: "/mv",
        query: {
          list: JSON.stringify(item),
        },
      });
    },
    //播放相关
    play(item) {
      document
        .getElementsByClassName("audio-play")[0]
        .classList.add("audio-stop");

      this.axios({
        withCredentials: true,
        method: "get",
        url:
          "https://music.hzbiz.net/song/url?timetamp=" + new Date().getTime(),
        params: {
          id: item.id,
        },
      }).then((res) => {
        this.axios({
          withCredentials: true,
          method: "get",
          url:
            "https://music.hzbiz.net/song/detail?timetamp=" +
            new Date().getTime(),
          params: {
            ids: item.id,
          },
        }).then((res) => {
          console.log("歌曲详情", res.data);
          this.currentMusic = res.data.songs[0];
          this.$store.state.nowMusic = this.currentMusic;
          this.$store.state.playMusicList.push(this.currentMusic);
          //数组对象去重
          let obj = {};
          this.$store.state.playMusicList = this.$store.state.playMusicList.reduce(
            function (item, next) {
              obj[next.id] ? "" : (obj[next.id] = true && item.push(next));

              return item;
            },
            []
          );
          this.axios({
            withCredentials: true,
            method: "get",
            url:
              "https://music.hzbiz.net/lyric?timetamp=" + new Date().getTime(),
            params: {
              id: this.$store.state.nowMusic.id,
            },
          }).then((res) => {
            this.$store.commit("saveLyric", res.data.lrc.lyric);
            console.log("歌词存储成功");
          });
          //评论获取
          this.axios({
            withCredentials: true,
            method: "get",
            url:
              "https://music.hzbiz.net/comment/music?timetamp=" +
              new Date().getTime(),
            params: {
              id: this.$store.state.nowMusic.id,
            },
          }).then((res) => {
            this.$store.commit("saveComment", res.data);
            console.log("歌曲评论储存成功", this.$store.state.songcomment);
          });
          console.log("添加歌单成功", this.$store.state.playMusicList);
          console.log("仓库现在的音乐", this.$store.state.nowMusic);
        });
        // console.log(res.data);
        let aud = document.getElementsByTagName("audio")[0];
        aud.setAttribute("src", res.data.data[0].url);
        aud.play();
      });
    },
  },
};
</script>

<style scoped>
.title {
  margin-top: 18px;
  width: 100%;
  padding-left: 28px;
  box-sizing: border-box;
}
.title p {
  text-align: left;
  color: rgba(0, 0, 0, 0.4);
  box-sizing: border-box;
}
.title p:nth-child(1) {
  width: 686px;
  padding-left: 120px;
  box-sizing: border-box;
}
.title p:nth-child(2) {
  width: 131px;
}
.title p:nth-child(3) {
  width: 377px;
}
.title p:nth-child(4) {
  width: 370px;
}
.title p:nth-child(5) {
  width: 150px;
}
.hd-dec {
  height: 37px;
  cursor: pointer;
  background-color: #f2f2f2;
  box-sizing: border-box;
  padding-left: 28px;
  margin-top: 10px;
}
.hd-dec .frist {
  color: #979797;
  margin-left: 40px;
}
.hd-dec .icon {
  width: 20px;
  height: 20px;
  overflow: hidden;
  margin-right: 15px;
}
.list li {
  height: 37px;
  box-sizing: border-box;
  padding-left: 28px;
  color: rgba(0, 0, 0, 0.4);
}
.list li.active {
  background-color: #f9f9f9;
}
.list li:hover {
  background-color: #f2f2f2;
}
.list p {
  box-sizing: border-box;
}
.list .music-title {
  width: 686px;
}
.list .music-title .ms-name {
  color: #000;
}
.list li .up {
  color: #000;
}
.list p:nth-child(2) {
  width: 131px;
}
.list p:nth-child(3) {
  width: 377px;
}
.list p:nth-child(4) {
  width: 370px;
}
.list p:nth-child(5) {
  width: 150px;
}
.list li .icon {
  cursor: pointer;
  width: 17px;
  height: 17px;
  overflow: hidden;
}
.list li .music-title span:first-child {
  margin-right: 30px;
  display: block;
  width: 25px;
}
.list li .music-title .icon {
  margin-right: 15px;
}
.list li .music-title .after {
  margin-right: 17px;
}
.list li .music-title .mv {
  border: 1px solid #e41;
  border-radius: 3px;
  color: #e41;
  width: 27px;
  height: 12px;
  font-size: 12px;
  margin-left: 10px;
  display: none;
}
.list li .music-title .sq {
  display: flex;
}
.list li .music-title .mv.active {
  display: flex;
  cursor: pointer;
}
.list li .music-title .mv.vip {
  display: flex;
  cursor: pointer;
}
</style>